<!DOCTYPE html>
<html>
    
    <head>
        <title>checkboxlist demo 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"
        />
        <script src="../../avalon.js"></script>
        <script src="../style/highlight/shCore.js"></script>
        <script>
            avalon.library("aoyou", {
                $ready: function () {
                    avalon.log("控件已经构建完毕")
                }
            })
            require(["./component/checkboxlist/avalon.checkboxlist"], function(avalon) {
                var demoVM = avalon.define({
                    $id: "demo",
                    checkedInputs: [],
                    $opts: {
                        data: [
                            { text : '文字1' , value : 'w1',check:true } ,
                            { text : '文字2' , value : 'w2' ,check:true } ,
                            { text : '文字3' , value : 'w3' } ,
                            { text : '文字4' , value : 'w4' }
                        ],
                        onSelect: function(e, inputsData){
                            demoVM.checkedInputs = inputsData
                        }
                    }
                })
                avalon.scan()
            });
        </script>
    </head>
    
    <body>
        <div class="wrapper">
            <div class="demo-show" ms-controller="demo">
                <fieldset>
                    <legend>配置check来设置checkboxlist初始选中状态</legend>
                    <aoyou:checkboxlist config="$opts" alltext=""></aoyou:checkboxlist>
                </fieldset>
            </div>
            <div style="text-align: right;">
                <p>onSelect获取values:
                    <span ms-repeat="checkedInputs">{{el}}&nbsp;</span>
                </p>
            </div>
            <div ms-skip>
                <pre class="brush:html; gutter: false; toolbar: false">
&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;title&gt;checkboxlist demo 2&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"
        /&gt;
        &lt;script src="../../avalon.js"&gt;&lt;/script&gt;
        &lt;script src="../style/highlight/shCore.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            avalon.library("aoyou", {
                $ready: function () {
                    avalon.log("控件已经构建完毕")
                }
            })
            require(["./component/checkboxlist/avalon.checkboxlist"], function(avalon) {
                var demoVM = avalon.define({
                    $id: "demo",
                    checkedInputs: [],
                    $opts: {
                        val: ['w1', 'w2'],
                        data: [
                            { text : '文字1' , value : 'w1' } ,
                            { text : '文字2' , value : 'w2' } ,
                            { text : '文字3' , value : 'w3' } ,
                            { text : '文字4' , value : 'w4' }
                        ],
                        onSelect: function(e, inputsData){
                            demoVM.checkedInputs = inputsData
                        }
                    }
                })
                avalon.scan()
            });
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div class="wrapper"&gt;
            &lt;div class="demo-show" ms-controller="demo"&gt;
                &lt;fieldset&gt;
                    &lt;legend&gt;配置val来设置checkboxlist初始选中状态&lt;/legend&gt;
                    &lt;aoyou:checkboxlist config="$opts" alltext=""&gt;&lt;/aoyou:checkboxlist&gt;
                    &lt;p&gt;onSelect获取values:
                        &lt;span ms-repeat="checkedInputs"&gt;{{el}}&nbsp;&lt;/span&gt;
                    &lt;/p&gt;
                &lt;/fieldset&gt;
            &lt;/div&gt;
            &lt;div ms-skip&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;

&lt;/html&gt;
</pre>
            </div>
        </div>
    </body>

</html>